<template>
    <div>
      ref,$bus,slot插槽
        <!-- 插槽的作用是将组件中的某些部分保留下来，放到替换的模板里 -->
        <myDialog ref="dialog">
            <!-- 老写法 -->
            <!-- <div slot="header">header1</div>
                 <div slot="footer">footer1</div> -->
            <!-- <div slot="footer" slot-scope="{a,b,isShow}">footer1 {{a}} {{b}} {{isShow}}</div> 
                 老版的作用域插槽用slot-scope -->

            <!-- 新写法 vue3也是 -->
            <!-- 插槽的数据默认使用当前组件父级数据 -->
            <template v-slot:header>{{msg}}</template>
            <!-- <template #header>{{msg}}</template> v-slot:可以简写为#号 -->

            <template v-slot:footer="{a,b,isShow}">footer2 {{a}} {{b}} {{isShow}}</template>
            <!-- 作用域插槽 用当前组件的数据，只能采用作用域插槽将数据传递出来 -->
            <!-- 此处可以拿到子组件传出来的数据 -->
        </myDialog>
        <button @click="changeFn">点我</button>
    </div>
</template>
<script>
import myDialog from '../comunicate/my-dialog.vue'
export default {
    data(){
        return{
            msg:'hello'
        }
    },
    components:{
        myDialog
    },
    mounted(){
        //挂载完成通知子组件
        this.$bus.$emit('监听事件','挂载完成通知子组件')

        this.$bus.$on('子触发父',function(arg){
            console.log(arg)
        })
    },
    methods:{
        changeFn(){
            //用ref获取组件的属性和方法，不要通过这种方式去改变组件的属性
            //ref的用法，在普通元素，可以获取dom元素
            //v-for里面，获取的是一组dom组件实例
            //组件上是当前组件的实例
            this.$refs.dialog.change()
        }
    }
}
</script>